<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>修饰符</title>
    <script src="../js/vue-dev.js"></script>
</head>
<body>
    <div id="app_modifier">
        <p>1、默认显示</p>
        <input v-model="message">
        <p>默认的数据显示：{{message}}</p>
        <p>输入字符串的长度：{{message.length}}</p>

        <p>2、.lazy修饰符的使用</p>
        <input v-model.lazy="message1">
        <p>被.lazy修饰符修饰后的数据显示：{{message1}}</p>
        <p>输入字符串的长度：{{message1.length}}</p>

        <p>3、.number修饰符的使用</p>
        <input v-model.number="message2">
        <p>被.lazy修饰符修饰后的数据显示：{{message2}}</p>
        <p>输入字符串的长度：{{message2.length}}</p>

        <p>4、.trim修饰符的使用</p>
        <input v-model.trim="message3">
        <p>被.lazy修饰符修饰后的数据显示：{{message3}}</p>
        <p>输入字符串的长度：{{message3.length}}</p>

    </div>


    <script>
        var app_modifier = new Vue({
            el:'#app_modifier',
            data:{
                message:'',
                message1:'',
                message2:'',
                message3:'',
            }
        })
    </script>

</body>
</html>